<template>
  <h1>{{ $t('menu.bmap') }}</h1>

  <div class="container">
    <div id="map"/>
    <Corner />
  </div>
</template>

<script lang="ts" setup>
import Corner from './car/Corner.vue';



const init = () => {
  const map = new BMap.Map("map");          // 创建地图实例
  const point = new BMap.Point(114.46301, 30.42312);   // 创建点坐标
  map.centerAndZoom(point, 15);
  map.enableScrollWheelZoom()
  let mk = new BMap.Marker(point);
  map.addOverlay(mk);
  console.log(map)

  let geolocation = new BMap.Geolocation();
  geolocation.enableSDKLocation();
  geolocation.getCurrentPosition(function (r: any) {
    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
      let mk = new BMap.Marker(r.point);
      map.addOverlay(mk);
      map.panTo(r.point);
      console.log(r)
      // alert('您的位置：'+r.point.lng+','+r.point.lat);
    }
    else {
      // alert('failed'+this.getStatus());
    }
  });

  const ev = {
    onSearchComplete: function (results: any) {
      console.log(results)
    },
    onMarkersSet: function (mas: any) {
      console.log(mas)
    }
  }
  const local = new BMap.LocalSearch(map, {
    renderOptions: { map: map },
    ...ev
  });
  local.search("充电站");


  const driving = new BMap.DrivingRoute(map, {
    renderOptions: {
      map: map,
      autoViewport: true
    }
  });

  // driving.search(point,)
}


</script>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'BMap',
  mounted() {
    this.init()
  },
  methods: {
    init() {
    }
  },
})

</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 400px;
}
.container {
  position: relative;
  padding: 0;
  height: 400px;
}


</style>
